﻿@model MVCMongo.ViewModel.Albums.AlbumListViewModel
@{
    ViewBag.Title = "AlbumEdit";
    Layout = "~/Views/Shared/_LayoutProfile.cshtml";
    ViewBag.Controller = "AlbumEdit";
}

<script src="../../Content/KendoUI/kendo.core.min.js" type="text/javascript"></script>
<script src="../../Content/KendoUI/kendo.upload.js" type="text/javascript"></script>
<link href="../../Content/KendoUI/kendo.kendo.min.css" rel="stylesheet" type="text/css" />
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="box box-bordered">
                <div class="box-title">
                    <h3><i class="icon-th-list"></i>Album Edit</h3>
                </div>
                <div class="box-content nopadding">
                    @using (Html.BeginForm("AlbumEdit", "Album", FormMethod.Post, new { @class = "form-horizontal form-striped", id = "album-Add", enctype = "multipart/form-data" }))
                    {

                        @Html.HiddenFor(m => m.Album.AlbumId)

                        <div class="control-group">
                            <label for="textfield" class="control-label">Name</label>
                            <div class="controls">
                                @Html.TextBoxFor(x => x.Album.Name, new { @class = "input-xlarge", @placeholder = "Text input" })
                            </div>
                        </div>


                        <div class="control-group">
                            <label class="control-label">Photos</label>
                            <div class="controls student-photo">


                                <span class="stack">
                                    <input name="attachments" id="attachments" type="file" />
                                </span>

                            </div>


                        </div>






                        <div class="box">

                            <div class="box-content nopadding" id="galary-area">

                                <ul class="gallery" id="gallary-list"></ul>
                            </div>
                        </div>

                        <div class="box-content ">

                            @Html.Partial("_partialPhotoList", Model.Photos)

                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Save changes</button>
                            <button type="button" class="btn">Cancel</button>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        //kendo ui plugin
        //for uploading files
        $("#attachments").kendoUpload({
            //upload: onUpload,
            multiple: true,
            showFileList: false,
            async: {
                saveUrl: ('/Album/UploadImages'),
                autoUpload: true

            },

            success: function (data) {

                if (data.response.success != null) {
                    alert(data.response.success);
                    //window.location.reload(true);

                }
                var imageGuid = data.response.guid;
                if (imageGuid.toString() == '') {
                    alert('upload failed please try again');
                } else {
                    var name = "hddimage" + data.response.filename;
                    var classname = "hddimage" + data.response.filename.replace('.', '');
                    $('#album-Add').append('<input type="hidden" class="' + classname + '" value="' + data.response.filename + '" name="picture" id="' + name + '" />');

                    var test = $(".box ul#gallary-list").attr("id");
                    $(".box ul#gallary-list ").append(data.response.view);
                    //$("#PhotoGuid").val(data.response.guid);
                    //$("#PhotoExt").val(data.response.ext);
                    //  $("#StudentPhoto").attr("src", data.response.path);
                }
            }
        });



    });

    $(".delete-image").live("click", function () {
        var element = $(this);
        var name = element.attr("data-id");

        var url = '@Url.Action("DeleteImageTemp", "Album")?image=' + name;
        $.getJSON(url, function (data) {
            if (data == "true") {
                element.closest("li").remove();

                $("#album-Add input[value='" + name + "']").remove();

            } else {
                alert("An error occurred while deleting!!!! ");
            }
        });

    });

</script>